
<template>
  <view class="app-container">
     <view>
  <view class="bg-img"></view>
  <view class="infos">
    <view class="title">尖山云层</view>
  <view class="tags">
    <view class="tag">尖山云层</view>
    <view class="tag">尖山云层</view>
    <view class="tag">尖山云层</view>
  </view>
  <view class="tip">尖山云层尖山云层尖山云层尖山云层</view>
  </view>
  
  <view class="bar"></view>

  <view class="infos">
  <view class="flex">
    <view class="item">
        <view class="tip">均价 </view> 
        <view class="item"> <text class="bg-number">11111</text> mi </view>
     </view>

    <view class="item">
        <view class="tip">主力户型</view> 
        <view class="item"> <text class="bg-number">11111</text> mi </view>
     </view>
  </view>
</view>

  <view class="infos">
        <view class="cc cell-title">最新动态</view> 
        <view class="">
           xxxxxxxxxxxxxxxxxxxx <text>{{text}}</text>
           xxxxxxxxxxxxxxxxxxxx <text>{{text}}</text>
           xxxxxxxxxxxxxxxxxxxx <text>{{text}}</text>
        </view>
     </view> 
     
     <view class="main">
        <view class="cc cell-title">佣金政策</view> 
        <view class="">
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view> 
        </view>
     </view>

     <view class="infos ">
        <view class="cc cell-title">项目信息</view> 
        <view class="more">
          <view class="we">
          <view class="item"> <text class="l-t">占地面积</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
        </view>
        <view class="we">
          <view class="item"> <text class="l-t">占地面积</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view> 
        </view>
        </view>
        
        <view class="we">
          <view class="item"> <text class="l-t">占地面积</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view>
          <view class="item"> <text class="l-t">分销周期</text> mi </view> 
        </view>
     </view>
     <view class="bar"></view>
     <view class="infos">
        <view class="cc cell-title">项目简介</view> 
        <view class="">
           xxxxxxxxxxxxxxxxxxxx  xxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </view>
     </view> 


     <view class="bar"></view>
     <view class="infos">
        <view class="cc cell-title">楼盘相册</view> 
        <view class="imgs"> 
          <view class="img">  </view>
          <view class="img">  </view>
          <view class="img">  </view>
        </view>
     </view> 
     <view class="infos">
        <view class="cc cell-title">项目户型</view> 
        <view class="imgs"> 
          <view class="img">  </view>
          <view class="img">  </view>
          <view class="img">  </view>
        </view>
     </view> 
     <view class="appPng"/>
     <view class="float">
          <view class="icon">  </view>
          <view class="icon">  </view>
          <view class="icon">  </view>
     </view>
</view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      item: {
        val1:"1111111"
      },
    
    };
  },
  mounted() {},
  methods: {
    confirm ({ selectedValue, selectedOptions }) {
      console.log({ selectedValue, selectedOptions });
    },
  },
};
</script>  

<style scoped> 
.bg-img{
  background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
  height: 150px;
}
.title{
  font-size: 20px;
  font-weight: 600;margin: 10px 0;
}
.tags{
  display: flex;flex-wrap: wrap;margin: 10px 0;
}
.tag{
  font-size: 12px ;color: #000;margin: 0 10px 0 0; border-radius: 10px; background: #FCD201;
  padding: 2px 4px;
}
.bar{
  height: 4px ;
}
.tip{
  font-size: 12px ;color: #ccc
}
.infos{
  padding: 0 20px;
}

.bg-number{
  font-size: 24px ; font-weight: 600;
}
.item{
  flex: 1;
}
.cell-title{
  font-size: 14px ; font-weight: 600;
  line-height: 30px;
}
.main{
  border-top: 10px solid #CCC;
  background: #FCD201;
  padding: 10px 20px;
}
.l-t{ margin-right: 10px;}
.we .l-t{ margin-right: 10px; color: #CCC;}
.more{
  display: flex;
  margin-bottom: 20px;
}
.more>.we{ 
  flex: 1;
}

.imgs{
  display: flex;
}
.img{ 
  height: 50px;
  width: 25%;
  margin: 10px ;
  background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
}
.float{
  position: fixed;
  bottom: 10px;
  right: 10px;
  height: 100px; 
}
.icon{
  width: 25px;
  height: 20px;
  margin: 5px ;
  background: url(https://unsplash.it/20/20?random) center center / 100% 100%;
}
</style>